<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const item = defineModel('item')
const handle = () => {
  //根据点击的商品进入商品详情
  router.push('/detail/' + item.value.id)
}
</script>
<template>
  <div class="box" @click="handle">
    <el-image :src="item?.picture" :fit="contain"></el-image>
    <div class="value">
      <h5>{{ item?.name }}</h5>
      <p>{{ item?.desc }}</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 200px;
  height: 260px;
  margin: 0 10px;
  h5 {
    font-family: '素材集市';
  }
  p {
    display: none;
    font-size: 10px;
    font-family: '清松';
  }
}
.value {
  position: absolute;
  width: 100%;
  bottom: 0px;
  transition: all 0.5s;
}
.box:hover {
  .value {
    background-color: rgba($color: #d0dfe6, $alpha: 0.7);
    p {
      display: block;
    }
  }
}
</style>
